<!DOCTYPE html>
<html lang="en-US" dir="ltr">
	<head>
		<meta charset="utf-8" />
		<title>Uix Kit Demo</title>	
        
		<!-- Mobile Settings
		============================================= -->
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        <!-- Mobile Settings end -->
        
        
		<!-- Core library
		============================================= -->
		<script src="assets/js/wp-jquery/jquery.min.js?ver=2.1.3"></script>
		<script src="assets/js/wp-jquery/jquery.migrate.min.js?ver=1.4.1"></script>
        <script src="assets/js/min/prefixfree.min.js?ver=1.0.7"></script>
        <!-- Core library  end -->
        
        
        
        
        
		<!-- Compatibility
		============================================= -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        
        <script src="assets/js/min/modernizr.min.js?ver=3.5.0"></script>
        
        <!--[if lt IE 9]>
            <script src='assets/js/min/respond.min.js?ver=1.4.2'></script>
        <![endif]-->
        
        <!-- Compatibility  end -->



		<!-- Web Fonts
		============================================= -->
        <!-- <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,700,800" rel="stylesheet"> -->
        <!-- Web Fonts  end -->
        
		<!-- Core & Theme CSS
		============================================= -->
        
        <!-- Basic  -->
        <link rel="stylesheet" href="assets/css/bootstrap.min.css?ver=3.3.7" media="all"/>
        <link rel="stylesheet" href="assets/css/video.min.css?ver=5.19" media="all"/>
        <link rel="stylesheet" href="assets/css/flexslider.min.css?ver=2.6.2" media="all" />
		<link rel="stylesheet" href="assets/css/animate.min.css?ver=3.5.2" media="all" />
        
        
        <!-- Icons  -->
        <link rel="stylesheet" href="assets/fonts/fontawesome/font-awesome.min.css?ver=4.7" media="all" /> 
        
       
        <!-- Theme  -->
        <link rel="stylesheet" href="assets/css/uix-kit.min.css?ver=MTUxOTgwNTQ3OTQxMQ"/>
        
        
         <!--[if lt IE 10]>
           <link rel="stylesheet" href="assets/css/uix-kit.IE.css?ver=MTUxOTgwNTQ3OTQxMQ" />
        <![endif]-->
        
        
        <!-- Core & Theme CSS  end -->
        
            
            
		<!-- SEO
		============================================= -->
        <meta name="description" content="Free Responsive HTML5 UI Kit for Fast Web Design Based On Bootstrap">
        <meta name="generator" content="Uix Kit" />  
        <meta name="author" content="UIUX Lab"> 
        <link rel="canonical" href="https://uiux.cc" />
        <!-- SEO  end -->
  
        
		<!-- Favicons
		============================================= -->
        <link rel="icon" href="assets/images/favicon/favicon-32x32.png" type="image/x-icon">
        <link rel="shortcut icon" href="assets/images/favicon/favicon-32x32.png" sizes="32x32">
        <link rel="apple-touch-icon" href="assets/images/favicon/apple-touch-icon-57x57.png">
        <link rel="apple-touch-icon" sizes="72x72" href="assets/images/favicon/apple-touch-icon-72x72.png">
        <link rel="apple-touch-icon" sizes="114x114" href="assets/images/favicon/apple-touch-icon-114x114.png">
        <!-- Favicons  end -->
     
  
  </head>     
  
     
  <body class="page">
  
  
          
              
    <!-- Loader
    ============================================= -->      
    <div class="loader">
        <!--[if lt IE 10]>
            <span>Loading...</span>
        <![endif]-->
        <svg class="spinner-container IE-hide" viewBox="0 0 52 52">
			<path d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"></path>
        </svg>
    </div>
    <!-- .loader end -->
    

    <!-- Mobile Menu Toggle
    ============================================= -->    
	<div class="menu-mobile-toggle">
		<span></span>
		<span></span>
		<span></span>
	</div>
    <div class="menu-mobile-mask"></div>
	<!-- .menu-mobile-toggle end -->


    
    

  
  
    <div class="wrapper">
    
        <!-- Header Area
        ============================================= -->      
        <header class="header-area transition">
            
             <div class="header-container transition">
                 <div class="container">
                 
                                                <div class="brand">
                            <a href="index.html"><img src="assets/images/logo.png" alt="Uix Kit Demo"></a>                       
                        </div>
                        <!-- .logo end -->
                        
                        
                        
                        <!-- Navigation Start-->
                        
                        <nav class="menu-container transition">
                               
                               <div class="inner">
                               
									<span class="mobile-brand"></span>
									<ul class="menu-main"> 
										<li class="multi-column current-menu-item"><a href="index.html">Components</a>
											<ul class="sub-menu">
												<li>
													<ul class="sub-menu">
														<li><span class="multi-column-title">Grid &  Extension</span></li>
														<li><a href="seamless-grid.html">Seamless Grid</a></li>
														<li><a href="bootstrap-grid.html">Bootstrap Grid</a></li>
														<li><a href="material-container.html">Material Container</a></li>
													</ul>
													<!-- .sub-menu  end -->
												</li>
												<li>
													<ul class="sub-menu">
														<li><span class="multi-column-title">Contents</span></li>
														<li><a href="list-posts.html">Posts List</a></li>
														<li><a href="list-split-imagery.html">Fullwidth List of Split</a></li>
														<li><a href="single-post.html">Single Post</a></li>
														<li><a href="sidebar.html">Sidebar</a></li>
														<li><a href="search.html">Search Box</a></li>
														<li><a href="contact.html">Contact Form</a></li>
														<li><a href="features.html">Features</a></li>
														<li><a href="pricing.html">Pricing</a></li>
														<li><a href="testimonials.html">Testimonials</a></li>
														<li><a href="multi-items-carousel.html">Easy Multiple Items Carousel</a></li>
														<li><a href="gallery.html">Gallery Normal</a></li>
														<li><a href="gallery-filter.html">Gallery Filterable</a></li>
														<li><a href="gallery-masonry.html">Gallery Masonry</a></li>
													</ul>
													<!-- .sub-menu  end -->
												</li>

												<li>
													<ul class="sub-menu">
														<li><span class="multi-column-title">Web Elements</span></li>
														<li><a href="button.html">Buttons</a></li>
														<li><a href="form.html">Form Elements</a></li>
														<li><a href="form-progress.html">Form Progress</a></li>
														<li><a href="timeline.html">Timeline</a></li>
														<li><a href="slideshow.html">Slideshow</a></li>
														<li><a href="card.html">Card</a></li>
														<li><a href="tabs.html">Tabs</a></li>
														<li><a href="accordion.html">Accordion</a></li>
														<li><a href="counter.html">Counter</a></li>
														<li><a href="video-background.html">Video BG</a></li>
														<li><a href="progress-bar.html">Progress Bar</a></li>
														<li><a href="modal-dialog.html">Modal UI</a></li>
														<li><a href="parallax.html">Parallax</a></li>
														<li><a href="scroll-reveal.html">Scroll Reveal</a></li>     
														<li><a href="periodical-scroll.html">Periodical Scroll</a></li>
														
														
													</ul>
													<!-- .sub-menu  end -->
												</li>
												<li>
													<ul class="sub-menu">
														<li><span class="multi-column-title">Interaction</span></li>
														<li><a href="list-posts-with-ajax.html">Ajax Load Posts</a></li>
														<li><a href="list-posts-with-ajax-infinitescroll.html">Infinite Scroll Posts</a></li>
														<li><a href="tooltip.html">Tooltip</a></li>
														<li><a href="show-more-less.html">Show More Less</a></li>
														
														
													</ul>
													<!-- .sub-menu  end -->
												</li>

											
											</ul>

										</li>
										<li><a href="#">Menu</a>
											<ul class="sub-menu">
												<li><a href="mega-menu.html">Mega Menu</a></li>
												<li><a href="mega-menu-rtl.html">Mega Menu(RTL)</a></li>
												<li><a href="onepage-menu.html">Onepage Menu</a></li>
												<li><a href="secondary-responsive-menu.html">Secondary Responsive Menu</a></li>
												<li><a href="dropdown-menu.html">Dropdown Menu</a></li>

											</ul>
											<!-- .sub-menu  end -->
										</li>

										<li><a href="typography.html">Typography</a>
											<ul class="sub-menu">
												<li><a href="typography.html">LTR</a></li>
												<li><a href="typography-rtl.html">RTL</a></li>
												<li><a href="typography-cn.html">中文</a></li>

											</ul>
										</li>



									</ul>
									<div class="menu-right">
										<a title="Follow us on Twitter" href="https://twitter.com/uiux_lab" target="_blank">
											<i class="fa fa-twitter"></i>
										</a>
										<a title="Follow us on Facebook" href="https://www.facebook.com/uiuxlabhome" target="_blank">
											<i class="fa fa-facebook"></i>
										</a>
										<a title="Fork on Github" href="https://github.com/xizon/uix-kit" target="_blank">
											<i class="fa fa-github"></i>
										</a>        
									</div>
                               
							   </div><!-- /.inner -->
        
                        </nav>
                        <!-- .menu-container end -->
                        
                 
                   
                        
                        
                        
                        
                  </div>
                  <!-- .container end -->
                  
                  <div class="clear"></div>
             </div>
        
        </header>
        <div class="header-inner"></div>
      
      
     
        <!-- Content 01
        ====================================================== -->
        <section class="space-none">
            <div class="container t-c">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 t-c">
                            <h2>Ajax Load Posts</h2>
                            
                        </div>
                    </div>
                    <!-- .row end -->
              
                    
            </div>
            <!-- .container end -->
 
        </section>
     
       
    
       <!-- Content 02
        ====================================================== -->
        <section>
            <div class="container">
                    <div class="row">
                        <div class="col-md-12 transition">
                        
							<div class="list-topic-container"
							     data-ajax-list-json="assets/json/content-posts.php" 
							     data-ajax-list-method="POST" 
							     data-ajax-list-temp-id="list-topic-ajax-template-1" 
							     data-ajax-list-page-now="1" 
							     data-ajax-list-page-per="8" 
							     data-ajax-list-page-total="-1" 
							     data-ajax-list-trigger="#ajax-loadmore-btn-1" 
							     data-ajax-list-trigger-active-class=".active" 
							     data-ajax-list-push-container-class=".list-topic-items-ajax-container" 
							     data-ajax-list-infinitescroll="false"
							     data-ajax-list-field-name1="Custom String 1"
							     data-ajax-list-field-name2="Custom String 2">


									<!-- List Item -->
									<div class="list-topic-item style-2">
										<div class="row">
											<div class="col-md-4 list-topic-item-img transition">
												<a href="#"> 
													<img src="assets-demo/images/test-img-big-1.jpg" alt="" />
												</a>
											</div><!-- /.col-md-4 -->
											
											
											<div class="col-md-8">

											    <div class="list-topic-item-info transition">
											        <div class="row">
											        
														<div class="col-md-5">

															<h3>
																 <a href="#">
																	 Project Title Here
																 </a>
															</h3>
														</div>


														<div class="col-md-7">

														    <div class="row">
																<div class="col-md-5">
																	<p><strong>Author:</strong> David</p>
																	<p><strong>Date:</strong> December 10, 2017</p>
																</div>


																<div class="col-md-7">
																	<p><strong>Comments:</strong> 20</p>
																	<p><strong>Categories:</strong> Art, Design</p>
																</div>												    
															</div><!-- .row  end -->


														</div>	
														  
													</div><!-- .row  end -->

											    
												</div><!-- /.list-topic-item-info -->


												<div class="clear"></div>


											</div><!-- /.col-md-8 -->
												
											<!-- ///////  -->
											
											<div class="col-md-4">
												
											</div><!-- /.col-md-4 -->
											<div class="col-md-8 detail list-normal table-normal">

													<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
											
												 <div class="tags-box">
													 <a href="#">Tag</a>
													 <a href="#">Video</a>
													 <a href="#">Web Design</a>
												 </div>

											</div><!-- /.col-md-8 -->
											
										</div>
										<!-- .row  end -->
										
										
										
									</div>
									<!-- List Item  end --> 
								
					
						
									<!-- List Item -->
									<div class="list-topic-item style-2">
										<div class="row">
											<div class="col-md-4 list-topic-item-img transition">
												<a href="#"> 
													<img src="assets-demo/images/test-img-big-2.jpg" alt="" />
												</a>
											</div><!-- /.col-md-4 -->
											
											
											<div class="col-md-8">

											    <div class="list-topic-item-info transition">
											        <div class="row">
											        
														<div class="col-md-5">

															<h3>
																 <a href="#">
																	 Project Title Here
																 </a>
															</h3>
														</div>


														<div class="col-md-7">

														    <div class="row">
																<div class="col-md-5">
																	<p><strong>Author:</strong> David</p>
																	<p><strong>Date:</strong> December 10, 2017</p>
																</div>


																<div class="col-md-7">
																	<p><strong>Comments:</strong> 20</p>
																	<p><strong>Categories:</strong> Art, Design</p>
																</div>												    
															</div><!-- .row  end -->


														</div>	
														  
													</div><!-- .row  end -->

											    
												</div><!-- /.list-topic-item-info -->


												<div class="clear"></div>


											</div><!-- /.col-md-8 -->
												
											<!-- ///////  -->
											
											<div class="col-md-4">
												
											</div><!-- /.col-md-4 -->
											<div class="col-md-8 detail list-normal table-normal">

													<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
											
												 <div class="tags-box">
													 <a href="#">Tag</a>
													 <a href="#">Video</a>
													 <a href="#">Web Design</a>
												 </div>

											</div><!-- /.col-md-8 -->
											
										</div>
										<!-- .row  end -->
										
										
										
									</div>
									<!-- List Item  end --> 
						
						
						
						
						
									<!-- List Item -->
									<div class="list-topic-item style-2">
										<div class="row">
											<div class="col-md-4 list-topic-item-img transition">
												<a href="#"> 
													<img src="assets-demo/images/test-img-big-3.jpg" alt="" />
												</a>
											</div><!-- /.col-md-4 -->
											
											
											<div class="col-md-8">

											    <div class="list-topic-item-info transition">
											        <div class="row">
											        
														<div class="col-md-5">

															<h3>
																 <a href="#">
																	 Project Title Here
																 </a>
															</h3>
														</div>


														<div class="col-md-7">

														    <div class="row">
																<div class="col-md-5">
																	<p><strong>Author:</strong> David</p>
																	<p><strong>Date:</strong> December 10, 2017</p>
																</div>


																<div class="col-md-7">
																	<p><strong>Comments:</strong> 20</p>
																	<p><strong>Categories:</strong> Art, Design</p>
																</div>												    
															</div><!-- .row  end -->


														</div>	
														  
													</div><!-- .row  end -->

											    
												</div><!-- /.list-topic-item-info -->


												<div class="clear"></div>


											</div><!-- /.col-md-8 -->
												
											<!-- ///////  -->
											
											<div class="col-md-4">
												
											</div><!-- /.col-md-4 -->
											<div class="col-md-8 detail list-normal table-normal">

													<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac.</p>
													
													 <p>People think focus means saying yes to the thing you&#8217;ve got to focus on. But that&#8217;s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I&#8217;m actually as proud of the things we haven&#8217;t done as the things I have done. Innovation is saying no to 1,000 things. <cite>Steve Jobs &#8211; Apple Worldwide Developers&#8217; Conference, 1997</cite></p>
													<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper.</p>
													<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac.</p>
													
											
												 <div class="tags-box">
													 <a href="#">Tag</a>
													 <a href="#">Video</a>
													 <a href="#">Web Design</a>
												 </div>

											</div><!-- /.col-md-8 -->
											
										</div>
										<!-- .row  end -->
										
										
										
									</div>
									<!-- List Item  end --> 
								
						
						
						            <div class="list-topic-items-ajax-container"></div>
									<script id="list-topic-ajax-template-1" type="text/template7">
									
									    {{#each items}}
										
										
											<!-- List Item -->
											<div class="list-topic-item style-2">
												<div class="row">
													<div class="col-md-4 list-topic-item-img transition">
														<a href="{{link}}"> 
															<img src="{{img}}" alt="" />
														</a>
													</div><!-- /.col-md-4 -->


													<div class="col-md-8">

														<div class="list-topic-item-info transition">
															<div class="row">

																<div class="col-md-5">

																	<h3>
																		 <a href="{{link}}">
																			 {{title}}
																		 </a>
																	</h3>
																</div>


																<div class="col-md-7">

																	<div class="row">
																		<div class="col-md-5">
																			<p><strong>Author:</strong> {{author}}</p>
																			<p><strong>Date:</strong> {{time}}</p>
																		</div>


																		<div class="col-md-7">
																			<p><strong>Comments:</strong> {{comments}}</p>
																			<p><strong>Categories:</strong> {{cat}}</p>
																		</div>												    
																	</div><!-- .row  end -->


																</div>	

															</div><!-- .row  end -->


														</div><!-- /.list-topic-item-info -->


														<div class="clear"></div>


													</div><!-- /.col-md-8 -->

													<!-- ///////  -->

													<div class="col-md-4">

													</div><!-- /.col-md-4 -->
													<div class="col-md-8 detail list-normal table-normal">

															<p>{{detail}}</p>

														 <div class="tags-box">
															 {{tags}}
														 </div>

													</div><!-- /.col-md-8 -->

												</div>
												<!-- .row  end -->



											</div>
											<!-- List Item  end --> 

	
										
										{{/each}}

									</script>  
                                  
									
						
						
						
						
							</div><!-- /.list-topic-container -->
                       
                       
                        </div>
                        <!-- .col-md-12 end -->
                    </div>
                    <!-- .row end -->
                    
                    
                      
                    <p class="t-c">
                        <a id="ajax-loadmore-btn-1" href="javascript:void(0)" class="button button-hover button-border-thin button-size-s button-bg-primary button-radius">Load More</a>
				    </p>
                    
            </div>
            <!-- .container end -->
            
            
            
 
        </section>
        
         
      
        
        
        
        
                <!-- Footer
        ============================================= -->    
        <footer class="footer-main-container">
            <div class="container">
				<nav class="pull-left">
					<ul>
						<li>
							<a href="https://uiux.cc">
								UIUX Lab
							</a>
						</li>
						<li>
							<a href="https://opensource.org/licenses/MIT">
								Licenses
							</a>
						</li>
						<li>
							<a href="https://github.com/xizon/uix-kit">
								Download
							</a>
						</li>
					</ul>
				</nav>
				<div class="pull-right">
					Copyright &copy; Uix Kit 2018.  |  All rights reserved. Created by UIUX Lab.
				</div>
              
            </div><!-- .container  end -->
        </footer>
        
        
    </div>
    <!-- .wrapper end -->
       
       
      

    <!-- Basic Script -->
	<script src="assets/js/min/jquery.mousewheel.min.js?ver=3.1.12"></script>
	<script src="assets/js/min/jquery.easing.min.js?ver=1.3"></script>
    <script src="assets/js/min/jquery.waitforimages.min.js?ver=1.0"></script>
    <script src="assets/js/min/video.min.js?ver=5.19"></script> 
	<script src="assets/js/min/jquery.waypoints.min.js?ver=4.0.1"></script> 
    <script src="assets/js/min/template7.min.js?ver=1.2.5"></script>

    
    <!-- Slideshow  -->
    <script src="assets/js/min/jquery.flexslider.min.js?ver=2.7.0"></script>
    
    <!-- Masonry -->
    <script src="assets/js/wp-jquery/masonry.min.js?ver=3.3.2"></script>
    <script src="assets/js/wp-jquery/imagesloaded.min.js?ver=4.1.0"></script>

    <!-- Filterable  -->
    <script src="assets/js/min/jquery.shuffle.min.js?ver=3.1.1"></script> 
    
    
    
	<!-- Your Plugins & Theme Scripts
	============================================= -->
	

    
    <!-- Theme Script -->
	<script>
        var wp_theme_custom_root_path = {
			"templateUrl" :"", //If the file is in the root directory, you can leave it empty; if in another directory, you can write: "/blog"
			"homeUrl"     :""  //Eg. https://uiux.cc
		};
    </script>  
    <script src="assets/js/uix-kit.min.js?ver=MTUxOTgwNTQ3OTQxMQ"></script>



	<!-- Your Plugins & Theme Scripts  end -->
    

	<script>
			/* Google analytics */
			(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
			(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
			m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
			})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

			ga('create', 'UA-70658525-1', 'auto');
			ga('send', 'pageview');

	</script> 
    
 

  </body>
</html>


